<style lang="scss" scoped>
	.porder {
		height: 100%;
		@include n-col1;
		align-items: stretch;
		padding-top: 20px;
		
		.n-page-h1{
			gap:20px;
			position: relative;
			.n-page-tabs{
				@include n-center;
			}
		}
		.porder-main {
			height: 0;
			margin-top: 20px;
			flex: 1;
			
		}
		.porder-list{
			color: $theme-text3;
			font-size: 16px;
			>li{
				background: $theme-bg-white1;
				height: 100px;
				gap:20px;
				padding: 0 30px;
				@include n-row1;
				border-radius: 20px;
				&+li{
					margin-top: 30px;
				}
			}
			.porder-list-avatar{
				width: 25%;
				@include n-row1;
				gap:15px;
				>img{
					width: 50px;
					height: 50px;
					object-fit: cover;
					border-radius: 50%;
				}
				>article{
					flex: 1;
					width: 0;
					>h3{
						line-height: 1;
						font-size: 18px;
					}
					>p{
						line-height: 1;
						color: $theme-text5;
						margin-top: 10px;
					}
				}
			}
			.porder-list-item{
				flex: 1;
				width: 0;
				@include n-col2;
				align-items: stretch;
				>p{
					line-height: 1;
					color: $theme-text5;
				}
				>h3{
					margin-top: 10px;
					line-height: 1;
					@include n-row1;
					gap:20px;
				}
			}
			.n-page-iconBtn{
				background: $theme-bg-white4;
			}
		}
		
		
		.porder-card{
			color: $theme-text3;
			font-size: 16px;
			display: grid;
			grid-template-columns: repeat(auto-fill,minmax(320px,auto));
			grid-auto-rows: max-content;
			gap:30px;
			>li{
				min-width: 0;
				min-height: 0;
				padding: 12px;
				background: $theme-bg-white1;
				border-radius: 30px;
				>header{
					background: #f4f9fd;
					@include n-col2;
					height: 180px;
					border-radius: 25px;
					align-items: center;
					>img{
						width: 60px;
						height: 60px;
						object-fit: cover;
						border-radius: 50%;
						margin-bottom: 10px;
					}
					>h3{
						line-height: 1;
						font-size: 14px;
						margin-bottom: 7px;
					}
				}
				>ul{
					@include n-row2;
					height: 100px;
					align-items: stretch;
					>li{
						flex: 1;
						width: 0;
						@include n-col2;
						align-items: center;
						font-size: 14px;
						text-align: center;
						>h3{
							line-height: 1;
							font-size: 25px;
						}
						>p{
							line-height: 1;
							font-size: 14px;
							color: $theme-text5;
							margin-top: 14px;
						}
					}
				}
			}
			
		}
		
			

	}
</style>

<template>

	<div class="n-page porder" v-loading="loading">
		<!--    <p class="n-page-back"><span><i class="el-icon-back"></i>返回</span></p>-->
		<h1 class="n-page-h1">
			<em>{{ $route.meta.title }}({{list.length}})</em>
<!--			<ul class="n-page-tabs">-->
<!--				<li v-for="item in opts.layout" :class="{'n-page-tabs-cur': params._layout === item.value}" @click=" params._layout = item.value">{{item.label}}</li>-->
<!--			</ul>-->
		</h1>
		<div class="porder-main">
			<ul class="porder-list"  v-show="params._layout === 'list'">
				<li v-for="item,idx in list" :key="idx">
<!--					<div class="porder-list-avatar">-->
<!--						<img src="@/assets/img/9.png" />-->
<!--						<article>-->
<!--							<h3>{{item.order_id}}</h3>-->
<!--							<p>{{item.order_date}}</p>-->
<!--						</article>-->
<!--					</div>-->

          <div class="porder-list-item">
						<p>商品</p>
						<h3>{{item.product_list[0].name}}</h3>
					</div>

          <div class="porder-list-item">
						<p>订单金额</p>
						<h3>{{item.total_amount}}</h3>
					</div>

					<div class="porder-list-item">
						<p>下单用户</p>
						<h3>{{item.user_name}}</h3>
					</div>
					
					<div class="porder-list-item">
						<p>电话</p>
						<h3>{{item.tel}}</h3>
					</div>
					<div class="porder-list-item">
						<p>收货地址</p>
						<h3>{{item.shipping_address}}</h3>
					</div>
					
					<el-dropdown >
						<i  class="n-page-iconBtn el-icon-more"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					
				</li>
			</ul>
		
			<ul class="porder-card" v-show="params._layout === 'card'">
				<li v-for="item,idx in list" :key="idx">
					<header class="porder-card-avatar">
						<img src="@/assets/img/9.png" />
						<h3>{{item.order_id}}</h3>
						<h3>{{item.order_date}}</h3>
						<i class="n-page-tag">{{item.user_name}}</i>
					</header>
					
					<ul class="porder-card-dash">
						<li><h3>1</h3><p>待开始<br/>任务</p></li>
						<li><h3>3</h3><p>进行中<br/>任务</p></li>
						<li><h3>2</h3><p>已审查<br/>任务</p></li>
					</ul>
					
				</li>
			</ul>
					
			
		
		</div>
		
		
		
	</div>
</template>

<script>

	export default {
		data() {
			return {
				loading:false,
				opts:{
					layout:[
						{label:'列表', value:'list'},
						{label:'状态', value:'card'},
					]
				},
				list:[],
				params:{
					_layout:'list',
					_total:0,
				},
				
				
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData(){
				const res = await this._req(this.$api.goods.getGiftOrder());
				if(!res) return;
				this.list = res.results;
			},
		
			
			
		}
	}
</script>
